<template>
  <div class="container">
    <h1>count:{{count}} </h1>
    <button @click=add()>count++</button>
    <hr>
    <h1>hi {{obj.name}} {{obj.age}} {{obj.brand.name}}</h1>
    <button @click=updateName()>updateName</button>
    <button @click=updateBrandName()>updateBrandName</button>
  </div>
</template>

<script>
import { onBeforeMount, onMounted, reactive, toRefs, ref, computed, watch } from 'vue'

export default {
  name: 'App',
  setup () {
    const count = ref (0)
    const add = () => {
      count.value ++
    }

    const obj = reactive ({
      name: 'jack',
      age: 18,
      brand: {
        id: 1,
        name: 'BMW'
      }
    })
    const updateName = () => {
      obj.name = 'jerry'
      obj.age = 29
    }

    const updateBrandName = () => {
      obj.brand.name = 'Benz'
    }

    // 监听一个ref数据，第二个参数是回调
    // watch (count, (newVal, oldVal) => {
    //   console.log (newVal, oldVal)
    // })
    // 监听reactive数据
    // watch (obj, () => {
    //   console.log ('obj变了')
    // })
    // 监听多个数据改变
    // watch ([count,obj], () => {
    //   console.log ('监听多个数据变化')
    // })
    // 监听对象中某一个属性
    watch (() => obj.brand, () => {
      console.log ('obj.brand变化了')
    }, {
      deep: true,
      immediate:true
    })

    return {count, add, obj, updateName, updateBrandName}
  }
}
</script>
